<template>
  <svg 
    :width="size" 
    :height="size" 
    :viewBox="viewBox" 
    :fill="fill"
    :class="['icon', name]"
    xmlns="http://www.w3.org/2000/svg"
    v-html="iconPath"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  name: string
  size?: number | string
  fill?: string
}

const props = withDefaults(defineProps<Props>(), {
  size: 24,
  fill: 'currentColor'
})

const icons: Record<string, { viewBox: string; path: string }> = {
  ArrowLeft: {
    viewBox: '0 0 24 24',
    path: '<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>'
  },
  Sun: {
    viewBox: '0 0 24 24',
    path: '<circle cx="12" cy="12" r="5"/><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>'
  },
  Moon: {
    viewBox: '0 0 24 24',
    path: '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>'
  },
  Camera: {
    viewBox: '0 0 24 24',
    path: '<path d="M12 12m-3.2 0a3.2 3.2 0 1 0 6.4 0a3.2 3.2 0 1 0 -6.4 0"/><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>'
  },
  Message: {
    viewBox: '0 0 24 24',
    path: '<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>'
  },
  BookOpen: {
    viewBox: '0 0 24 24',
    path: '<path d="M21 5c-1.11-.35-2.33-.5-3.5-.5-1.95 0-4.05.4-5.5 1.5-1.45-1.1-3.55-1.5-5.5-1.5S2.45 4.9 1 6v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.1 20.45 5.05 20 6.5 20c1.95 0 4.05.4 5.5 1.5 1.35-.85 3.8-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V6c-.6-.45-1.25-.75-2-1zm0 13.5c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5V8c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z"/>'
  },
  Brain: {
    viewBox: '0 0 24 24',
    path: '<path d="M9.5 2C8.12 2 7 3.12 7 4.5c0 .73.3 1.39.78 1.87C6.71 6.95 6 8.17 6 9.5c0 1.38.72 2.5 1.62 3.22C6.78 13.38 6 14.62 6 16c0 1.38 1.12 2.5 2.5 2.5.73 0 1.39-.3 1.87-.78C11.05 19.29 12.27 20 13.5 20c1.38 0 2.5-1.12 2.5-2.5 0-.73-.3-1.39-.78-1.87C16.29 15.05 17 13.83 17 12.5c0-1.38-.72-2.5-1.62-3.22C16.22 8.62 17 7.38 17 6c0-1.38-1.12-2.5-2.5-2.5-.73 0-1.39.3-1.87.78C12.95 3.71 11.73 3 10.5 3c-.73 0-1.39.3-1.87.78C8.3 3.3 7.64 3 6.9 3H9.5z"/>'
  },
  FileText: {
    viewBox: '0 0 24 24',
    path: '<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>'
  },
  Lightbulb: {
    viewBox: '0 0 24 24',
    path: '<path d="M9 21c0 .5.4 1 1 1h4c.6 0 1-.5 1-1v-1H9v1zm3-19C8.1 2 5 5.1 5 9c0 2.4 1.2 4.5 3 5.7V17c0 .5.4 1 1 1h6c.6 0 1-.5 1-1v-2.3c1.8-1.3 3-3.4 3-5.7 0-3.9-3.1-7-7-7z"/>'
  },
  Globe: {
    viewBox: '0 0 24 24',
    path: '<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>'
  },
  Send: {
    viewBox: '0 0 24 24',
    path: '<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>'
  },
  Grid: {
    viewBox: '0 0 24 24',
    path: '<path d="M3 3h8v8H3zm0 10h8v8H3zm10-10h8v8h-8zm0 10h8v8h-8z"/>'
  },
  Flag: {
    viewBox: '0 0 24 24',
    path: '<path d="M5 2v20l6-6h8V2H5zm2 2h12v10H9l-2 2V4z"/>'
  },
  Star: {
    viewBox: '0 0 24 24',
    path: '<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>'
  },
  Paperclip: {
    viewBox: '0 0 24 24',
    path: '<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>'
  },
  X: {
    viewBox: '0 0 24 24',
    path: '<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>'
  },
  AtSign: {
    viewBox: '0 0 24 24',
    path: '<circle cx="12" cy="12" r="4"></circle><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>'
  }
}

const iconData = computed(() => icons[props.name] || icons.ArrowLeft)
const viewBox = computed(() => iconData.value.viewBox)
const iconPath = computed(() => iconData.value.path)
</script>

<style scoped>
.icon {
  display: inline-block;
  vertical-align: middle;
}
</style>